<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-color: red;
      }

      @media all and (min-width: 800px) and (max-width: 1000px) {
        body {
          background-color: blue;
        }
      }

      @media all and (min-width: 1000px) {
        body {
          background-color: green;
        }
      }

      /* orientation: landscape表示横屏 */
      /* orientation: portrait表示竖屏 */
      /* @media all and (orientation: landscape) {
        body {
          background-color: blue;
        }
      } */
    </style>
  </head>
  <body></body>
</html>

<!-- 
  响应式主要是通过, 监测屏幕的大小发生改变来更改布局的样式, 只要窗口大小发生了改变, 则 对应的布局样式也会发生改变, 如何监测窗口大小的改变呢 ? 这里不得不说一下实现响应式的基本原理 : 媒体查询技术

​	  媒体查询技术 : 是用来专门监测设备的发生改变的一种技术 ; 他可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。



  媒体查询的基本语法
    @media all and (min-width:320px) {
      body { background-color:blue;}
    }

    这里的all表示设备类型
    也可以改成screen

    and 被称为关键字，其他关键字还包括 not(排除某种设备)，only(限定某种设备)

    (min-width: 320px) 就是媒体特性，其被放置在一对圆括号中。

    对设备提出询问（称作表达式）开始，如果表达式结果为真，媒体查询中的CSS被应用，如果表达式结果为假，媒体查询内的CSS将被忽略。

 -->
